import React, { useState, useEffect } from 'react';
import style from './index.less';

export default function Home(): React.ReactElement {
  const [cardStatus, setCardStatus] = useState(0);
  const [data, setData] = useState([
    {
      title: '',
      img: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo.jpeg',
      ds: false,
    },
    {
      title: '',
      img: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo.jpeg',
      ds: false,
    },
    {
      title: '',
      img: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/card-cover-docs-demo.jpeg',
      ds: false,
    },
  ]);
  useEffect(() => {
    console.log(data);
  }, [data]);
  return (
    <div style={{ position: 'relative', display: 'flex' }}>
      {data.map((item, index) => (
        <div
          onMouseEnter={() => {
            console.log(index);
            const temp = data;
            temp[index].ds = true;
            setData([...temp]);
          }}
          onMouseLeave={() => {
            console.log(index);
            const temp = data;
            temp[index].ds = false;
            setData([...temp]);
          }}
        >
          {item.ds == true ? (
            <div className={style.card}>11</div>
          ) : (
            <div className={style.card} key={`${index}d`}>
              <img src={item.img} className={style.image} />
              <div className={style.context}>
                <div className={style.title_con}>函索综艺{item.title}</div>
              </div>
            </div>
          )}
        </div>
      ))}
    </div>
  );
}
